<template>
	<view class="home-container">
		<!-- 顶部店铺信息 -->
		<view class="shop-header">
			<image class="shop-logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="shop-name">悦享生活平台</text>
		</view>
		
		<!-- 店铺详细信息 -->
		<view class="shop-detail">
			<view class="info-card">
				<view class="info-item">
					<text class="info-label">营业时间：</text>
					<text class="info-value">10:00 - 22:00</text>
				</view>
				<view class="info-item">
					<text class="info-label">店铺地址：</text>
					<text class="info-value">城市中心广场A座108号</text>
				</view>
				<view class="info-item">
					<text class="info-label">联系电话：</text>
					<text class="info-value">400-123-4567</text>
				</view>
				<view class="info-item">
					<text class="info-label">商家简介：</text>
					<text class="info-value">提供各类美食，让您享受舌尖上的美味体验。</text>
				</view>
			</view>
		</view>
		
		<!-- 进入点餐按钮 -->
		<view class="button-area">
			<view class="btn-wrapper">
				<button class="order-btn enter-order" @click="navigateTo('order')" hover-class="btn-hover">
					<text class="btn-text">点击开锁</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopName: '悦享生活平台',
				shopInfo: {
					operatingHours: '10:00 - 22:00',
					address: '城市中心广场A座108号',
					phone: '400-123-4567',
					description: '提供各类美食，让您享受舌尖上的美味体验。'
				}
			}
		},
		onLoad() {
			// 页面加载时的逻辑
		},
		methods: {
			// 导航到指定页面
			navigateTo(page) {
				this.$navigate.navigateToUnique(`/pages/${page}/index`)
			}
		}
	}
</script>

<style>
	/* 全局样式 */
	.home-container {
		background: url('/static/background.jpg') no-repeat center;
		background-size: cover;
		padding: 40rpx;
		height: 100vh;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	}
	
	/* 顶部店铺信息样式 */
	.shop-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}
	
	.shop-logo {
		width: 180rpx;
		height: 180rpx;
		border-radius: 90rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.shop-name {
		font-size: 48rpx;
		font-weight: bold;
		margin-top: 20rpx;
		color: #fff;
	}
	
	/* 店铺详细信息样式 */
	.shop-detail {
		width: 98%;
		margin: 50rpx auto;
	}
	
	.info-card {
		opacity: 0.8;
		width: 100%;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 30rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.6);
	}
	
	.info-item {
		display: flex;
		margin: 16rpx 0;
	}
	
	.info-label {
		color: #666;
		font-size: 28rpx;
		width: 160rpx;
	}
	
	.info-value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
		line-height: 1.5;
	}
	
	/* 按钮区域样式 */
	.button-area {
		position: absolute;
		bottom: 15%;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		width: 90%;
	}
	
	.btn-wrapper {
		margin: 20rpx 0;
		width: 100%;
	}
	
	.order-btn {
		height: 120rpx;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 20rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
	}
	
	.enter-order {
		background-color: #3188ba;
		width: 100%;
	}
	
	.btn-text {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.btn-hover {
		transform: scale(0.95);
		opacity: 0.9;
	}
</style>
